<template>
    <div>
        <navigation></navigation>
        <div style="margin:0 auto;width:80%">
            <el-table
      :data="tableData"
      style="width: 100%" align="center">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="学校">
      </el-table-column>
      <el-table-column
        prop="num"
        label="文章数">
      </el-table-column>
      <el-table-column
        prop="id"
        label="权限">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button  @click="dialogTableVisible = true"  size="small">查看</el-button><br>
        <el-button  size="small">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
    //详细
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
  
<el-form ref="form" :model="form" label-width="80px" style="maxWidth:800px">
                        <div class="info">
                            <!-- <span>ID:</span><span v-text="this.$store.state.id"></span><el-divider></el-divider>
                            <span>昵称:</span><span v-text="form.name"></span><el-divider></el-divider>
                            <span>邮箱:</span><span v-text="form.email"></span><el-divider></el-divider>
                            <span>姓名:</span><span v-text="form.realname"></span><el-divider></el-divider>
                            <span>简介:</span><span v-text="form.user_description"></span> -->
                            <span>ID:</span><span v-text="94453285"></span><el-divider></el-divider>
                            <span>昵称:</span><span>冬瓜西皮</span><el-divider></el-divider>
                            <span>邮箱:</span><span>16683483@qq.com</span><el-divider></el-divider>
                            <span>姓名:</span><span>张三</span><el-divider></el-divider>
                            <span>动态数量：54 &nbsp;</span>
                            <span>文章数量：7 &nbsp;</span>
                            <span>提问数量：32  </span><br>
                            <span>问答数量：45&nbsp;&nbsp;</span>
                            <span>互动数量：120</span>

                        </div><br>
                    </el-form>
</el-dialog>

<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
        </div>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
          tableData: [{
            date: '2016-05-02',
            name: '张三',
            address: '北京大学',
            num:88,
            id:'普通用户'
          }, {
            date: '2016-05-04',
            name: '李四',
            address: '清华大学',
            num:88,
            id:'普通用户'
          }, {
            date: '2016-05-01',
            name: '王五',
            address: '上海大学',
            num:21,
            id:'普通用户'
          }, {
            date: '2016-05-04',
            name: '李四',
            address: '清华大学',
            num:88,
            id:'普通用户'
          }, {
            date: '2016-05-01',
            name: '王五',
            address: '上海大学',
            num:21,
            id:'普通用户'
          }, {
            date: '2016-05-03',
            name: '赵六',
            address: '四川大学',
            num:9,
            id:'管理员'
          }, {
            date: '2016-05-03',
            name: '赵六',
            address: '四川大学',
            num:9,
            id:'管理员'
          }]
        }
      }
    }
  </script>